<div class="component-viewer-workspace-header">
  <div class="component-viewer-workspace-title"
       title="{{t 'component_viewer.workspace.tooltip'}}">{{t 'component_viewer.workspace'}}</div>
  <button class="button-clean component-viewer-workspace-toggle js-toggle-workspace"
          title="{{#if settings.workspace}}{{t 'component_viewer.workspace.hide_workspace'}}{{else}}{{t 'component_viewer.workspace.show_workspace'}}{{/if}}">
    {{#if settings.workspace}}
      <i class="icon-double-chevron-left"></i>
    {{else}}
      <i class="icon-double-chevron-right"></i>
    {{/if}}
  </button>
</div>

<ul class="component-viewer-workspace-list">
  {{#eachReverse workspace}}
    <li class="component-viewer-workspace-item {{#if active}}active{{/if}}">
      <div class="text-ellipsis subtitle" title="{{component.projectName}}{{#if component.subProjectName}} / {{component.subProjectName}}{{/if}}">
        {{component.projectName}}{{#if component.subProjectName}} / {{component.subProjectName}}{{/if}}
      </div>
      {{#if component.dir}}<div class="text-ellipsis subtitle">{{component.dir}}</div>{{/if}}
      {{qualifierIcon component.q}} <a class="link-action" data-key="{{component.key}}">{{component.name}}</a>

      {{#if options}}
        <div class="component-viewer-workspace-transition">{{t 'component_viewer.transition' ../transition}}</div>
        <ul class="component-viewer-workspace-options">
          {{#each options}}
            <li class="component-viewer-workspace-option text-ellipsis {{#if active}}active{{/if}}" title="{{name}}">
              {{#if component}}
                <div class="text-ellipsis subtitle" title="{{component.projectName}}{{#if component.subProjectName}} / {{component.subProjectName}}{{/if}}">
                  {{component.projectName}}{{#if component.subProjectName}} / {{component.subProjectName}}{{/if}}
                </div>
              {{/if}}
              {{#if subname}}<div class="text-ellipsis subtitle" title="{{subname}}">{{subname}}</div>{{/if}}
              <a class="link-action" data-workspace-key="{{../component.key}}" data-key="{{key}}">{{name}}</a>
            </li>
          {{/each}}
        </ul>
      {{/if}}
    </li>
  {{/eachReverse}}
</ul>
